<template>
	<div>
		<swiper :key="looplist.length" ref="myswiper">
			<div class="swiper-slide lunbo" v-for="data in looplist" :key="data.id">
			<!-- {{ data.title }} -->
			<img :src="data.url" alt="">
			</div>
		</swiper>
		
		<FilmHeader :class="isFixed?'fixed':''"></FilmHeader>
		 

		
		<router-view></router-view>
	</div>
</template>

<script>
import swiper from '@/views/Film/Swiper'
import axios from 'axios'
import FilmHeader from '@/views/Film/FilmHeader'


	export default {
		data(){
			return {
				looplist:[],
				isFixed:false
			}
		},
		components: {
			swiper,
			FilmHeader,
		},
		methods:{
			handleScroll(){
				//console.log(document.documentElement.scrollTop,this.$refs.myswiper.$el.offsetHeight);
				//当滚动的高度大于轮播的高度
				if(document.documentElement.scrollTop>=this.$refs.myswiper.$el.offsetHeight){
					
					this.isFixed = true;
				}else{
					
					this.isFixed = false;
				}
			}
		},
		mounted() {
			axios.get('http://127.0.0.1:8003/navbar/')
			.then(res=>{
				console.log(res.data);
				this.looplist = res.data;
			})
			
			window.onscroll = this.handleScroll;
		},
		beforeDestroy(){
			console.log('beforeDestroy')
			//销毁滚动监听，只在file页面起作用
			window.onscroll = null;
		}
	}
</script>

<style scoped>
	.lunbo{
		widht:100%;
		height: 200px;
	}
</style>
